<template>
    <div id="fund-units-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script>
import { onMounted, watch } from "vue";
import * as echarts from 'echarts'
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { builtFundUnits, builtNorthBoundRatio } from '../myechart/multiYaxEchart'
import { useRoute } from 'vue-router'
import { getStockFundUnits } from "../service/fundUnits";

export 
default {
    setup() {
        const stockSearchStore = weekStockSearch()
        let { input } = storeToRefs(stockSearchStore)

        // 网址传参
        const {query: query} = useRoute()
        if(query.stock) {
            input.value = query.stock
        }

        // 只监听pinia中某一个值的变化
        watch(() => input.value, (newValue, oldValue) => {
            loadEchart()
        })

        let myChart = null
        const initEchart = () => {
            myChart = echarts.init(document.getElementById('fund-units-echart'))
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
        }

        const loadEchart = () => {
            getStockFundUnits(input.value).then(res => {
                let option = builtFundUnits(res.data)
                myChart.setOption(option)
            })
        }

        onMounted(()=> {
            initEchart()
            loadEchart()
        })
    }
}
</script>